<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="lib/html5.js"></script>
    <script type="text/javascript" src="lib/respond.min.js"></script>
    <![endif]-->
    <link href="static/h-ui/css/H-ui.min.css" rel="stylesheet" type="text/css"/>
    <link href="static/h-ui.admin/css/H-ui.admin.css" rel="stylesheet" type="text/css"/>
    <link href="lib/Hui-iconfont/1.0.8/iconfont.css" rel="stylesheet" type="text/css"/>
    <!--[if IE 6]>
    <script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>DD_belatedPNG.fix('*');</script><![endif]-->
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="js/admin.check.login.js"></script>
    <!--自定义工具-->
    <script type="text/javascript" src="js/HttpUtil.js"></script>
    <!--导入 vue 包-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <title>用户查看</title>
</head>

<script>
    var urlParam = getUrlParam("userId");
    console.log("参数id为======" + urlParam);
</script>


<body>
<div id="d_main_vue">
    <div class="cl pd-20" style=" background-color:#5bacb6">
        <img class="avatar size-XL l" :src="userImg"/>
        <dl style="margin-left:80px; color:#fff">
            <dt><span class="f-18">{{userInfo.userName}}</span> <span class="pl-10 f-12">余额：{{userInfo.balance}}</span>
            </dt>
            <dd class="pt-10 f-12" style="margin-left:0">这家伙很懒，什么也没有留下</dd>
        </dl>
    </div>


    <div class="pd-20">
        <table class="table">
            <tbody>
            <tr>
                <th class="text-r" width="80">用户名：</th>
                <td>{{userInfo.userName}}</td>
            </tr>
            <tr>
                <th class="text-r">邮箱：</th>
                <td>{{userInfo.email}}</td>
            </tr>
            <tr>
                <th class="text-r">积分：</th>
                <td>{{userInfo.integral}}</td>
            </tr>
            <tr>
                <th class="text-r">性别：</th>
                <td>{{userInfo.userSex}}</td>
            </tr>
            <tr>
                <th class="text-r">注册时间：</th>
                <td>{{userInfo.createTime}}</td>
            </tr>
            <tr>
                <th class="text-r">用户ID：</th>
                <td>{{userInfo.userID}}</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.page.js"></script>
<!--/_footer /作为公共模版分离出去-->

<script>
    let d_main_vue = new Vue({
        el: "#d_main_vue",
        data: {
            userInfo: {},
            userImg: "",
        },
        methods: {
            getUserInfo: function (userId) {
                if (userId == null) {
                    userId = urlParam;
                }
                //获取后台数据
                let url = "user/findUserById.do";
                let params = {userId: userId};

                let vue_quote = this;

                getWithParams(url, params, function (data) {
                    vue_quote.userInfo = data;
                    vue_quote.userImg = "http://localhost:8080/merchant_api_war_exploded/imgDo/fileDownload?id="
                        + data.userImg;
                    console.log(data.userImg);
                    console.log(vue_quote.userImg);
                });
            },
        },

        /**
         * 页面加载完成，并且Vue对象加载完成之后回调该函数：mounted
         */
        mounted: function () {
            this.getUserInfo();
        }
    });

</script>
</body>
</html>